<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// import * as echarts from "echarts";
import * as echarts from "echarts/lib/echarts.js";

import "echarts/map/js/china.js"; //引入中国地图数据
import city from "echarts/map/json/china-cities.json";
// import echarts from 'echarts'
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "platform",
    },
    width: {
      type: String,
      default: "960px",
    },
    height: {
      type: String,
      default: "635px",
    },
    mapData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    mapData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      var _this = this;
      var geoCoordMap = {};
      var mapName = "china";
      this.chart.showLoading();
      var mapFeatures = city.features;
      this.chart.hideLoading();
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name; // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      var data = [];

      data = this.mapData;

      var max = 480,
        min = 9;

      var maxSize4Pin = 100,
        minSize4Pin = 20;
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              count: data[i].count,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        console.log(geoCoord);
        return res;
      };
      window.onresize = this.chart.resize;
      this.chart.setOption({
        // 进行相关配置
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          backgroundColor: "#1540a1",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: false,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params, ticket, callback) {
            // if (ticket.indexOf('散点') != -1) {
            let index = params.dataIndex;
            console.log(_this.mapData);
            let name = params.name;
            var tipHtml = "";
            tipHtml =
              '<div style="width:280px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
              '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
              "</i>" +
              '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
              name +
              "</span>" +
              "</div>" +
              '<div style="padding:20px">' +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "订单数：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              _this.mapData[index].count +
              "</span>" +
              "笔" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "销售金额：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              _this.mapData[index].good +
              "</span>" +
              "元" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "销售占比：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              _this.mapData[index].bad +
              "</span>" +
              // "个" +
              "</p>" +
              "</div>" +
              "</div>";
            return tipHtml;
            // }
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 200,
          left: "10%",
          top: "bottom",
          calculable: false,
          seriesIndex: [1],
          inRange: {
            color: ["#04387b", "#467bc0"],
          },
        },
        geo: {
          map: mapName,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
            color: "#fff",
          },
          roam: true,
          zoom: 0.6,
          scaleLimit: {
            //所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 0.6, //最小的缩放值
          },
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "180%",
          itemStyle: {
            normal: {
              areaColor: "#0083ce", //地图颜色
              borderColor: "#0066ba", //省份边界颜色
            },
            emphasis: {
              borderColor: "#0066ba", //选中省份边界颜色
              areaColor: "#0494e1", //选中省份颜色
              shadowColor: "rgba(0, 0, 0, 0.4)", //选中省份投影
              shadowBlur: 10,
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(this.mapData),
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            hoverAnimation: true,
            symbolSize: 5,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
          },
          {
            name: "散点",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              this.mapData
                .sort(function (a, b) {
                  return b.count - a.count;
                })
                .slice(0, 5)
            ),
            symbolSize: 8,
            showEffectOn: "render",
            rippleEffect: {
              //涟漪特效
              period: 3, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "left",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
            },
            zlevel: 1,
          },
        ],
      });
      this.chart.on("click", this.handleClick);
      // this.chart.on("click", function (params) {
      // console.log(JSON.stringify(params.dataIndex)); // 这是被点击的柱子的索引，你可以通过这个索引获取到数据
      // console.log(JSON.stringify(params.seriesIndex)); // 这是被点击的柱子的系列的索引，你可以通过这个索引获取到数据
      // console.log(this);
      //   this.$emit("SetLineChartData", params.dataIndex);
      // });
    },
    handleClick(params) {
      this.$emit("SetLineChartData", params.dataIndex);
    },
  },
};
</script>
